// 物业消息管理
import React, { Fragment, useState } from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableFooter from '@material-ui/core/TableFooter';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import TablePagination from '@material-ui/core/TablePagination';
import IconButton from '@material-ui/core/IconButton';
import FirstPageIcon from '@material-ui/icons/FirstPage';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import LastPageIcon from '@material-ui/icons/LastPage';
import DateFnsUtils from '@date-io/date-fns';
import {
    MuiPickersUtilsProvider,
    DatePicker
} from '@material-ui/pickers';
import 'date-fns';
import zhCNLocale from "date-fns/locale/zh-CN";

import Grid from '@material-ui/core/Grid';


const useStyles = makeStyles(theme => ({
    container: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    button: {
        margin: theme.spacing(1),
    },
    textField: {
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
        width: 200,
    },
    dense: {
        marginTop: 19,
    },
    menu: {
        width: 200,
    },
}));

const useStyles1 = makeStyles(theme => ({
    root: {
        flexShrink: 0,
        color: theme.palette.text.secondary,
        marginLeft: theme.spacing(2.5),
    },
}));

// 分页控制器
function TablePaginationActions(props) {
    const classes = useStyles1();
    const theme = useTheme();
    const { count, page, rowsPerPage, onChangePage } = props;

    function handleFirstPageButtonClick(event) {
        onChangePage(event, 0);
    }

    function handleBackButtonClick(event) {
        onChangePage(event, page - 1);
    }

    function handleNextButtonClick(event) {
        onChangePage(event, page + 1);
    }

    function handleLastPageButtonClick(event) {
        onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
    }

    return (
        <div className={classes.root}>
            <IconButton
                onClick={handleFirstPageButtonClick}
                disabled={page === 0}
                aria-label="first page"
            >
                {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
            </IconButton>
            <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
                {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
            </IconButton>
            <IconButton
                onClick={handleNextButtonClick}
                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
                aria-label="next page"
            >
                {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
            </IconButton>
            <IconButton
                onClick={handleLastPageButtonClick}
                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
                aria-label="last page"
            >
                {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
            </IconButton>
        </div>
    );
}

TablePaginationActions.propTypes = {
    count: PropTypes.number.isRequired,
    onChangePage: PropTypes.func.isRequired,
    page: PropTypes.number.isRequired,
    rowsPerPage: PropTypes.number.isRequired,
};


const useStyles2 = makeStyles(theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing(1),
    },
    table: {
        minWidth: 500,
        height: 500,
    },
    tableWrapper: {
        overflowX: 'auto',
    },
}));


// 自定义分页表格
function CustomPaginationActionsTable(props) {
    const classes = useStyles2();
    const rows = props.rows;
    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(5);

    const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);

    function handleChangePage(event, newPage) {
        props.handleChangePage(newPage + 1,() => setPage(newPage))
        // setPage(newPage);
    }

    function handleChangeRowsPerPage(event) {
        setRowsPerPage(parseInt(event.target.value, 10));
        setPage(0);
    }

    return (
        <Paper className={classes.root}>
            <div className={classes.tableWrapper}>
                <Table className={classes.table}>
                    <TableHead>
                        <props.TableHeadRow />
                    </TableHead>
                    <TableBody>
                        {/* {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => ( */}
                        {rows.map((row, index) => (
                            <React.Fragment key={index}>
                                <props.TableBodyRow
                                    row={row}
                                    openNewMessageDialog={props.openNewMessageDialog}
                                    openSendDialog={props.openSendDialog}
                                />
                            </React.Fragment>
                        ))}

                        {/* {emptyRows > 0 && (
                            <TableRow style={{ height: 48 * emptyRows }}>
                                <TableCell />
                            </TableRow>
                        )} */}
                    </TableBody>
                    <TableFooter>
                        <TableRow>
                            <TablePagination
                                rowsPerPageOptions={[5]}
                                colSpan={12}
                                count={props.rowsCount}
                                rowsPerPage={rowsPerPage}
                                page={page}
                                SelectProps={{
                                    inputProps: { 'aria-label': 'rows per page' },
                                    native: true,
                                }}
                                onChangePage={handleChangePage}
                                onChangeRowsPerPage={handleChangeRowsPerPage}
                                ActionsComponent={TablePaginationActions}
                            />
                        </TableRow>
                    </TableFooter>
                </Table>
            </div>
        </Paper>
    );
}
// 日期选择器样式
const dateStyle = makeStyles(theme => ({
    root: {
        marginTop: theme.spacing(2),
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
    },
}));
// 日期选择器
function InlineDatePickerDemo(props) {
    const classes = dateStyle();
    const [selectedDate, handleDateChange] = useState(new Date());
    return (
        <Fragment>
            <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhCNLocale}>
                <DatePicker
                    className={classes.root}
                    variant="inline"
                    label="开始日期"
                    value={selectedDate}
                    onChange={handleDateChange}
                    format="yyyy/MM/dd/"
                />
                <DatePicker
                    className={classes.root}
                    variant="inline"
                    label="结束日期"
                    value={selectedDate}
                    onChange={handleDateChange}
                    format="yyyy/MM/dd/"
                />
            </MuiPickersUtilsProvider>
        </Fragment>
    );
}
const GridStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1,
      marginTop: theme.spacing(2),
    },
    control: {
      padding: theme.spacing(2),
    },
}));
function SpacingGrid(props) {
    const classes = GridStyles();

    return (
      <Grid container className={classes.root} spacing={2}>
        <Grid item xs={12}>
          <Paper className={classes.control}>
            <Grid container>
              <Grid item>
                <Button  variant="contained" color="primary" onClick={() => {props.openNewMessageDialog('新建')}}>
                    新建
                </Button>
              </Grid>
            </Grid>
          </Paper>
        </Grid>
      </Grid>
    );
  }

export default function App(props) {
    const classes = useStyles();
    // 搜索对象
    const [searchs, setSearchs] = React.useState({
        startDate: '',
        endDate: '',
        messageName: '',
    })

    // 输入框变化 更新搜索对象
    function handleChange(name,event){
        setSearchs({...searchs,[name]:event.target.value});
    };
    // 提交搜索
    function handleSearch() {
        console.log(searchs);
    }
    return (
        <div className="main-page-content">
            {/* 搜索模块 */}
            <div className={classes.container} noValidate autoComplete="off" style={{ textAlign: 'right' }}>
                {/* 日期选择器 */}
                <InlineDatePickerDemo />
                <TextField
                    id="standard-name"
                    label={props.searchInputPlaceholder.replace('请输入','')}
                    placeholder={props.searchInputPlaceholder}
                    className={classes.textField}
                    value={searchs.messageName}
                    onChange={(event) =>{ 
                        handleChange('messageName',event) 
                    }}
                    margin="normal"
                />
                <Button onClick={handleSearch} variant="contained" color="primary" className={classes.button} style={{ WebkitAlignSelf: 'flex-end', alignSelf: 'flex-end', height: '40px' }}>
                    搜索
                </Button>
            </div>
            <SpacingGrid 
                openNewMessageDialog={props.openNewMessageDialog}
            />
            {/* 自定义带分页表格 */}
            <CustomPaginationActionsTable
                rows={props.rows}
                rowsCount={props.rowsCount}
                TableHeadRow={props.TableHeadRow}
                TableBodyRow={props.TableBodyRow}
                handleChangePage={props.handleChangePage}
                openNewMessageDialog={props.openNewMessageDialog}
                openSendDialog={props.openSendDialog}
            />
        </div>
    )
}